<%@ include file="/WEB-INF/views/common/includes.jsp"%>

<section class="panel">
	<div class="panel-heading" style="padding: 8px 10px">
		<b>RESULTS</b>
	</div>
	<div class="panel-body">
		<section class="panel">
			<header class="panel-heading text-right bg-light">
				<ul class="nav nav-tabs pull-left">
					<li class="active"><a href="#recipes" data-toggle="tab"><i
							class="icon-list-alt text-default"></i>Recipes</a></li>
					<li><a href="#users" data-toggle="tab"><i
							class="icon-user text-default"></i>Users</a></li>
				</ul>
				<span class="hidden-sm">&nbsp;</span>
			</header>
			<div class="panel-body">
				<div class="tab-content">
					<div class="tab-pane fade active in" id="recipes">
						<c:if test="${not empty recipes}">
							<c:forEach var="recipe" items="${recipes}">
								<section class="panel">
									<div class="panel-body">
										<div class="col-lg-6">
											<c:url var="goToRecipe"
												value="/recipe/recipeInfo?recipeId=${recipe.id}"></c:url>
											<a href="<c:out value="${goToRecipe}"/>"> <img
												src="/recipe/picture/${recipe.id}_medium" width="100%"
												style="height: 350px" alt="Recipe_Image"></a>
										</div>
										<div class="col-lg-6 font-bold">
											<div class="row" style="margin-bottom: 50px">
												<div class="panel-header">
													<c:url var="goToRecipe"
														value="/recipe/recipeInfo?recipeId=${recipe.id}"></c:url>
													<a href="<c:out value="${goToRecipe}"/>"><c:out
															value="${recipe.recipe_name}" /></a>
												</div>
											</div>
											<%-- <div class="row" style="margin-bottom: 20px">
												<div class="panel-header font-bold"
													style="margin-bottom: 10px">
													<strong>Tags</strong>
												</div>
												<div class="panel" style="padding: 7px">
													<c:out value="${recipe.tags}" />
												</div>
											</div> --%>
											<div class="row" style="margin-bottom: 30px">
												<div class="panel-header font-bold"
													style="margin-bottom: 10px">
													<strong>Preparation</strong>
												</div>
												<div class="panel" style="padding: 7px">
													<c:out value="${recipe.description}" />
												</div>
											</div>
										</div>
									</div>

									<footer class="panel-footer">
										<div class="row" style="margin-left: 0px">
											<div class="col-sm-12">
												<div style="float: left; margin-bottom: 15px">
													<i class="icon-time"></i> <strong>Cook Time:</strong>
													${recipe.cook_time}<strong style="margin-right: 75px">
														Minutes</strong>
												</div>
												<div style="float: left; margin-bottom: 15px">
													<i class="icon-time"></i> <strong>Preparation
														Time:</strong>${recipe.prep_time}<strong style="margin-right: 75px">
														Minutes</strong>
												</div>

												<div style="float: left; margin-bottom: 15px">
													<i class="icon-time"></i> <strong>Total Time:</strong> <strong
														style="margin-right: 75px">
														<%-- ${recipe.total_time}  --%>Minutes
													</strong>
												</div>
											</div>
										</div>

										<div class="row" style="margin-bottom: 15px">
											<div class="col-sm-12">

												<div class="col-sm-7">
													<strong style="float: left">RATE:</strong>

													<div style="float: left"
														data-bind="foreach: new Array(full(${recipe.rate}))">
														<i class="icon-star"></i>
													</div>
													<div style="float: left"
														data-bind="foreach: new Array(half(${recipe.rate}))">
														<i class="icon-star-half-empty"></i>
													</div>
													<div style="float: left; margin-right: 5px"
														data-bind="foreach: new Array(empty(${recipe.rate}))">
														<i class="icon-star-empty"></i>
													</div>

													<p id="rate" style="display: none">${recipe.rate}</p>
													<strong>${recipe.rate}</strong> <strong>/5</strong>
												</div>
											</div>
											<div class="col-sm-2" style="padding-right: 0px; float: left">
												<strong>${recipe.rating_count}</strong> person voted!
											</div>
										</div>
										<div class="col-lg-12">
											<c:url var="thisURL" value="publicProfile">
											</c:url>
											<a
												href="<c:out value="${thisURL}?username=${recipe.recipe_owner}"/>">by
												${recipe.recipe_owner}</a>
										</div>
									</footer>

								</section>
							</c:forEach>
						</c:if>
					</div>
					<div class="tab-pane fade" id="users">
						<c:if test="${not empty users}">
							<c:forEach var="user" items="${users}">
								<div class="row">
									<section class="col-lg-3">&nbsp;</section>
									<section class="panel col-lg-6">
										<div class="panel-body">
											<div class="col-lg-4">
												<a href="#" class="pull-left thumb-md m-r"> <c:if
														test="${not empty userId}">
														<img src="/profile/picture/${userId}" class="img-rounded">
													</c:if>
												</a>
												<%--Profile resmi yoksa hata donmesin. Default avatar donsun. --%>
												<c:if test="${empty userId}">
													<c:url var="goToUser"
														value="/publicProfile?username=${user.username}"></c:url>
													<a href="<c:out value="${goToUser}"/>"
														class="pull-left thumb m-r"> <img
														src="theme/images/avatar_default.jpg" class="img-circle">
													</a>
												</c:if>
											</div>
											<div class="col-lg-5">
												<div class="row">
													<c:url var="goToUser"
														value="/publicProfile?username=${user.username}"></c:url>
													<a href="<c:out value="${goToUser}"/>">${user.username}</a>
												</div>

												<div class="row">
													<c:url var="goToUser"
														value="/publicProfile?username=${user.username}"></c:url>
													<a href="<c:out value="${goToUser}"/>">Go To User</a>
												</div>
											</div>
										</div>
									</section>
									<section class="col-lg-3">&nbsp;</section>
								</div>
							</c:forEach>
						</c:if>
					</div>
				</div>
			</div>
		</section>
	</div>
	<script>
		var total = parseInt() + parseInt()
		var full = function(rate) {
			console.log(rate);
			return parseInt(rate);
		}

		var half = function(rate) {
			if (rate == parseInt(rate)) {
				return 0;
			} else {
				return 1;
			}
		}

		var empty = function(rate) {
			return parseInt(5 - rate);
		}

		var StarViewModel = function() {

		};

		ko.applyBindings(new StarViewModel());

		function calc(A, B, SUM) {
			var one = document.getElementById(A).value;
			var two = document.getElementById(B).value;
			document.getElementById(SUM).value = parseInt(one) + parseInt(two);
		}
	</script>
</section>
